<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1 {
				color: #FF0000;
			}
			.bigblue {
				color: #00FFFF;
				font-size: 40px;
			}
			
			h1, span {
				color: #FF0000;
			}
			
		/* 	span {
				color: #FF0000;
			} */
			#d1 p {
				color: yellow;
			}
			
			#d3>p {
				color: darkred;
			}
			
			/* input[checked="checked"] {
				color: #FF0000;
				!important：表示不能重写
			} */
			#p2 {
				font-size: 40px;
				color: yellow;
			}
			
			p[id="p2"] {
				color: #00FFFF!important;
			}
			
			/*在d3的下面*/
			#d3+p {
				color: #00FFFF;
			}
			
			#d3~p {
				color: #FFE4C4;
			}
			
			#p2 {
				font-size: 40px;
				color: black;
			}
		</style>
	</head>
	<body>
		常用选择器
		标签选择器，单独标签选择用的不多
			交集：标签1 标签2
			并集：标签1, 标签2
		类选择器：主要是指class属性。定义的时候需要以.开头
		id选择器：与id属性有关，定义的时候需要以#开头
		父元素
		子元素
		祖宗元素
		后代元素
		兄弟元素(邻居)
		<p id="p1">id选择器</p>
		<!-- <p id="p1">id选择器</p> -->
		实际开发中不会出一个id出多次，在同一个页面
		<p class="bigblue">class选择器</p>
		<h1>我是标题</h1>
		<span>我是本文标签</span>
		<div id="d1">
			<p>我是div1的文本内容</p>
			<span><p>span中的p标签</p></span>
		</div>
		<div id="d2">
			<p>我是div2的文本内容</p>
		</div>
		<hr >
		<p>div3的邻居</p>
		<div id="d3">
			<p>我是div3的文本内容</p>
			<span><p>span中的p标签</p></span>
			<span><p>span中的p标签</p></span>
			<p>我是div3的文本内容</p>
			<p>我是div3的文本内容</p>
		</div>
		<p>div3的邻居1</p>
		<p>div3的邻居2</p>
		属性选择器
		<!-- <input type="checkbox" checked="checked" >
		<input type="checkbox" /> -->
		<p id="p2">是p2标签</p>
	</body>
</html>
